<template>
	<view class="body p30">
		<view class="bg-white p20 br32 section">
			<view class="item mb40">
				<view class="name mb15 f30">姓名</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					v-model="studentName"
					placeholder="请输入姓名" />
			</view>
			<!-- <view class="item mb40">
				<view class="name mb15 f30">手机号</view>
				<input class="ww100 pl30 pr30 f30 br24" type="number" :maxlength="11" v-model="studentPhone" placeholder="请输入手机号" />
			</view> -->
			<view class="item mb40">
				<view class="name mb15 f30">性别</view>
				<picker
					class="pl30 pr30 f30 br24"
					mode="selector"
					:value="gIndex"
					:range="gender"
					@change="setGander">
					<view class="d-b-c date">
						<view class="" v-if="gIndex > -1">
							{{ gender[gIndex] }}
						</view>
						<view class="gray6" v-else>请选择性别</view>
						<u-icon name="arrow-down"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">出生日期</view>
				<picker
					class="pl30 pr30 f30 br24"
					mode="date"
					@change="setBirthday">
					<view class="d-b-c date">
						<view class="" v-if="birthday">{{ birthday }}</view>
						<view class="gray6" v-else>请选择出生日期</view>
						<i class="iconfont icon-rili1"></i>
					</view>
				</picker>
			</view>

			<view class="item mb40">
				<view class="name mb15 f30">关系</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					type="text"
					v-model="relation"
					placeholder="请输入关系" />
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">年龄</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					type="number"
					v-model="age"
					placeholder="请输入年龄" />
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">就过敏史</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					type="text"
					v-model="allergy"
					placeholder="如无请留空" />
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">特殊需求</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					type="text"
					v-model="needs"
					placeholder="如无请留空" />
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">医疗备注信息</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					type="text"
					v-model="medicalNote"
					placeholder="如无请留空" />
			</view>
			<view class="form-actions d-b-c mt50">
				<view
					class="pt30 pb30 pl40 pr40 br50 btn-secondary mr40 flex-1 tc fb f32"
					@click="back">
					取消
				</view>
				<view
					class="white pt30 pb30 pl40 pr40 br50 btn-primary flex-1 tc fb f32"
					@click="save()">
					保存修改
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: uni.getStorageSync("user"),
			gender: ["男", "女"],
			gIndex: 0,
			studentName: "", //姓名
			studentPhone: "", //手机号
			birthday: "", //生日
			relation: "", //关系
			age: "", //年龄
			allergy: "", //过敏史
			needs: "", //特殊需求
			medicalNote: "", //医疗备注信息
			id: "", //
		};
	},
	onLoad({ title, item }) {
		if (item) {
			item = JSON.parse(item);
			// console.log(item);
			this.id = item.id;
			this.studentName = item.studentName;
			this.gIndex = item.gender == "男" ? 0 : 1;
			this.birthday = item.birthday;
			this.relation = item.relation;
			this.age = item.age;
			this.allergy = item.allergy;
			this.needs = item.needs;
			this.medicalNote = item.medicalNote;
		}
		uni.setNavigationBarTitle({
			title,
		});
	},
	methods: {
		checkChinese(value) {
			// 正则表达式，匹配非中文字符
			const regex = /[^\u4e00-\u9fa5]/g;
			return regex.test(value);
		},
		setGander(e) {
			this.gIndex = e.detail.value;
		},
		setBirthday(e) {
			this.birthday = e.detail.value;
		},
		async save() {
			if (this.studentName == "") return this.$showToast("请输入姓名");
			// if (this.checkChinese(this.studentName)) return this.$showToast("请输入中文");
			if (this.birthday == "") return this.$showToast("请选择生日");
			if (this.relation == "") return this.$showToast("请输入关系");
			// if (this.checkChinese(this.relation)) return this.$showToast("请输入中文");
			if (this.age == "") return this.$showToast("请输入年龄");
			if (this.id) {
				const res = await this.$request({
					url: this.$api.studentEdit,
					method: "PUT",
					data: {
						id: this.id,
						parentId: this.user.id,
						studentName: this.studentName,
						studentPhone: this.studentPhone,
						gender: this.gender[this.gIndex],
						relation: this.relation,
						birthday: this.birthday,
						age: this.age,
						allergy: this.allergy,
						needs: this.needs,
						medicalNote: this.medicalNote,
					},
				});
				this.$showToast("修改成功");
				setTimeout(() => uni.navigateBack(), 1000);
			} else {
				const res = await this.$request({
					url: this.$api.studentAdd,
					method: "POST",
					data: [
						{
							parentId: this.user.id,
							studentName: this.studentName,
							studentPhone: this.studentPhone,
							gender: this.gender[this.gIndex],
							relation: this.relation,
							birthday: this.birthday,
							age: this.age,
							allergy: this.allergy,
							needs: this.needs,
							medicalNote: this.medicalNote,
						},
					],
				});
				this.$showToast(res.msg);
				if (res.code == 0) {
					setTimeout(() => uni.navigateBack(), 1000);
				}
			}
		},
	},
};
</script>

<style scoped lang="scss">
.btn-secondary {
	background: #ecf0f1;
	color: #7f8c8d;
}

.btn-primary {
	background: linear-gradient(to right, #3498db, #2ecc71);
}

.btn {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.section {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.name {
	color: #2c3e50;
	font-weight: 500;
}

input,
picker {
	border: 1px solid #e0e7ff;
	transition: all 0.3s;
	background: #f8faff;
	height: 80rpx;

	.date {
		height: 80rpx;
	}
}
</style>
